<template>
  <div class="common-layout">
      
    <el-container>
      <el-header><p style="float:left">作业成果展示</p></el-header>
      <el-container>
      

         <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
      <el-scrollbar>
        <el-menu :default-openeds="['1', '3']">
          <el-sub-menu index="1">
            <template #title>
              <el-icon><message /></el-icon>
              <el-icon>
        <Warning />
        </el-icon>一
            </template>
            <el-menu-item-group>
              <template #title>* 1 *</template>
              <el-menu-item index="1-1"> <router-link to="/">首页</router-link>&nbsp;&nbsp;</el-menu-item>
              
            </el-menu-item-group>
            <el-menu-item-group title="* 2 *">
                <el-menu-item index="1-2"><router-link to="/firstworld">第一次练习</router-link>&nbsp;&nbsp;</el-menu-item>
               <el-menu-item index="1-3"><router-link to="/helloworld">第二次练习</router-link>&nbsp;&nbsp;</el-menu-item>
           <el-menu-item index="1-4"><router-link to="/elementworld">第三次练习</router-link>&nbsp;&nbsp;</el-menu-item> </el-menu-item-group>
          </el-sub-menu>
          <el-sub-menu index="2">
             
            <template #title>
              <el-icon><icon-menu /></el-icon>
              <el-icon>
        <Warning />
        </el-icon>
             二
            </template>
            <el-menu-item-group>
              <template #title>* 1 *</template>
              
              <el-menu-item index="2-1">! 1 !</el-menu-item>
              <el-menu-item index="2-2">! 2 !</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group title="* 2 *">
              <el-menu-item index="2-3">! 3 !</el-menu-item>
            </el-menu-item-group>
            <el-sub-menu index="2-4">
              <template #title>! 4 !</template>
              <el-menu-item index="2-4-1">Option 4-1</el-menu-item>
            </el-sub-menu>
          </el-sub-menu>


          <el-sub-menu index="3">
            <template #title>
              <el-icon><setting /></el-icon>
              <el-icon>
        <Warning />
        </el-icon>三
            </template>
            <el-menu-item-group>
              <template #title>* 1 *</template>
              <el-menu-item index="3-1">! 1 !</el-menu-item>
              <el-menu-item index="3-2">! 2 !</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group title="* 2 *">
              <el-menu-item index="3-3">! 3 !</el-menu-item>
            </el-menu-item-group>
            <el-sub-menu index="3-4">
              <template #title>! 4 !</template>
              <el-menu-item index="3-4-1">Option 4-1</el-menu-item>
            </el-sub-menu>
          </el-sub-menu>
        </el-menu>
      </el-scrollbar>
    </el-aside>

     <el-container>
      <el-header style="text-align: right; font-size: 12px ">
        <div class="toolbar">
          <el-divider content-position="right">刘畅</el-divider>
        </div>
      </el-header></el-container>



        <el-container>
            <div class="zz">
          <el-main><router-view></router-view></el-main>
         </div>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>
<script>
import {Warning} from '@element-plus/icons-vue'
export default{
data(){
    return{
            
    }
    },
    components:{
     Warning
    }
}
</script>
<style scoped>
.toolbar{
    width: 1200px;
    margin-top: -40px;
}
.zz{
    margin-left: -1100px;
    width: 1200px;
    height: 1200px;
}
</style>